<lift:surround with="desktop" at="content">
<lift:head>
	<link class="lift:Includes.d3"></link>
	<link class="lift:Includes.codetreemap"></link>
	<link class="lift:Includes.sourceview"></link>
	<link class="lift:Includes.projectsPage"></link>
	<link rel="icon" href="../icon.png" />
</lift:head>

<div class="lift:ProjectWidgetry">
	<project:stateupdates></project:stateupdates>

	<div class="header-push"></div>

	<div class="fixed-header">	
		<div class="project-header">
			<div class="header-section">
				<div data-toggle="ProjectSwitcher">
					Projects
				</div>
			</div>

			<div class="header-section breadcrumb-carat">
				<i class="fa fa-chevron-circle-right"></i>
			</div>

			<div class="header-section">
				<project:nameconflict><i class="fa fa-exclamation-triangle warningIcon"></i></project:nameconflict>
			</div>

			<div class="header-section">
				<project:nameconflict>
					<div class="warningText">
						This project has the same name as another project. Click the name to change it now.
					</div>

					<h1 class="editable">
						<div class="edit-content">
							<project:name></project:name>
						</div>
						<div class="editor">
							<input type="text"/>
							<span class="editor-save">&#x23ce;</span>
						</div>
					</h1>
				</project:nameconflict>
			</div>

			<div class="header-section">
				<div class="header-detail">
					<span class="detail-name" style="/*hax*/margin-right:5px;">created on</span>
					<span class="date">
						<project:creationdate></project:creationdate>
					</span>
				</div>
				<project:ifimported>
					<div class="header-detail">
						<span class="detail-name">imported on</span>
						<span class="date">
							<project:importdate></project:importdate>
						</span>
					</div>
				</project:ifimported>
			</div>


			<div class="header-section">
				<div class="header-detail">
					<project:exportlink>
						<i class="fa fa-share-square-o"></i>
						Export
					</project:exportlink>
				</div>
			</div>

			<lift:embed what="branding"></lift:embed>
			
		</div>
	</div>

	<lift:embed what="ProjectSwitcher"></lift:embed>

	<!-- Provides the base HTML for the PackageWidget (see PackageWidget.js) -->
	<lift:embed what="package-widget-template"></lift:embed>

	<lift:comet type="DependencyCheck"></lift:comet>

	<lift:comet type="SurfaceDetector"></lift:comet>

		
	<div class="projects-scope">
			
		<!-- package header area -->
		<div class="packages-header">
			<div class="title-row">
				<div class="title-label">Application Inventory</div>
				<div class="title-toolbar">&nbsp;</div>
			</div>
			<div class="header-row">
				<div class="header-label">
					<i id="surface-button" class="im im-surface-off surface-icon" title="Surface Methods"></i>
				</div>
				<div class="header-trace">
					<abbr title="Toggle whether or not an item will be watched during a trace">
						Trace
					</abbr>
				</div>
				<div class="header-method-count">Methods</div>
				<div class="header-barchart">Coverage</div>
			</div>
		</div>

		<div class="main-column">
			<div id="packages">
				<!-- auto-generated content for package widgets/barchart stuff -->
			</div>
		</div>

		<div id="packages-controls-menu" class="controls-menu hidden">
			<div id="clear-selections-button" class="menu-button" id="recording-color-resetter">
				<i class="fa fa-square-o"></i>
				Clear selections
			</div>
		</div>

		<div class="middle-column-alt fixed-sidebar" id="treemap">
			<div class="treemap-header">
				<div id="show-treemap-button">
					<!-- Show/Hide treemap button, floating as a tab on the treemap drawer -->
				</div>
				<div class="header-text">
					Code Treemap
					<i class="fa fa-question-circle"
						id="treemap-help-tooltip-trigger"></i>
				</div>
				<div class="maximizer">
					<i class="fa"><!-- css will pick the expand/collapse character --></i>
				</div>
				<!-- this div's content is used in the tooltip for the <i> directly above here -->
				<div id="treemap-help-tooltip-content" style="display:none;">
					<p>
						The Code Treemap visualizes the items that you select from the Application Inventory.
					</p>
					<div>
						The size of each item in the treemap is based on the number of instructions
						generated by the compiler for that particular item (lines of source code roughly
						correlate to the number of instructions).
					</div>
				</div>
			</div>

			<div id="treemap-container">
				<div class="widget-body">
					<!-- Treemap goes here -->
				</div>
				<div class="no-selection-message">
					Select packages from the list on the left to display them in more detail here
				</div>
				<div id="source-popout">
					<script type="text/x-handlebars-template" id="source-popout-header-template">
						<h2>
							Related Source
							<a class="close">&times;</a>
						</h2>

						{{!-- FILE --}}
						<div class="text-hardwrap">
							<strong>File</strong> {{sourceFilePath}}
						</div>
						<div class="text-hardwrap">
							<strong>Source</strong> {{sourceLabel}}
						</div>
						<div class="text-hardwrap">
							<strong>Traced Source Locations</strong> {{tracedSourceLocationCount}} of {{sourceLocationCount}} {{tracedSourceLocationPercentage}}
						</div>
						<div class="text-hardwrap">
							<i id="is-surface-method-button" data-node-id="{{nodeId}}" data-node-is-surface-method="false" class="im im-surface-off is-surface-method"></i>
							<span class="is-surface-method-label">Surface Method</span>
						</div>
					</script>

					<header></header>
					<article>
						<div class="codemirror-parent"></div>
					</article>
				</div>
			</div>
		</div>

		<div id="dependency-check-report">
			<div class="report-header">
				<div class="close-button"><i class="fa fa-times"></i></div>
				<div class="header-text">Dependency Check Result</div>
			</div>

			<div class="report-container">
				<p class="well summary clearfix">
					<span class="credits">Data provided by <a external-href="http://jeremylong.github.io/DependencyCheck/">Dependency Check</a>.</span>
					<a id="full-report-link" external-href="#"><i class="fa fa-file-text-o"></i> Full report</a>
				</p>
				<ul class="vuln-list">
				</ul>
			</div>
		</div>
		
		<div class="side-column fixed-sidebar" id="trace-controls">
			
			<lift:embed what="trace-recording-controls"></lift:embed>
		</div>
	</div>

	<div class="lift:Comet?type=ProjectUpdated"></div>

</div>
</lift:surround>